<template>
  <div class="system-log-list-container">
    <div class="sec-head">
      <div class="local-name">系统日志</div>
      <div
        class="delete-btn"
        v-if="userGuardList.includes(guard.SystemLogManage)"
      >
        <el-button
          size="small"
          icon="el-icon-delete"
          class="user-activity-delete"
          @click="deleteSelectedLog"
        >删除所选</el-button>
        <el-button
          size="small"
          icon="el-icon-delete"
          class="user-activity-delete"
          @click="deleteAllLog"
        >清除日志</el-button>
      </div>
    </div>

    <div class="system-log-search-form">
      <search-form
        v-model="searchForm"
        @search="search"
      ></search-form>
    </div>
    <div class="system-log-data-table">
      <data-table
        ref="dataTableComponent"
        v-model="sort"
        :tableData="tableData"
        @search="search"
      ></data-table>
    </div>
    <div class="paging-footer">
      <el-pagination
        background
        @size-change="pageSizeChangeHandler"
        @current-change="currentPageChangeHandler"
        :current-page.sync="currentPage"
        :page-size.sync="pageSize"
        :page-sizes="pageSizes"
        layout="total,sizes, prev, pager, next, jumper"
        :total="totalCount"
        align="right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import DataTable from './dataTable';
import SearchForm from './searchForm';
import { SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { validateSearchForm } from './service.js';
import { getSystemLogListApi } from '../../../api/systemLog';
import { parseError } from '../../../utils';
import { deleteSystemLogApi } from '../../../api/systemLog';

export default {
  components: {
    SearchForm,
    DataTable
  },
  data() {
    return {
      selectedSystemActivityLogIdList: [],
      searchForm: {
        btnLoading: false,
        systemType: '',
        level: '',
        appender: '',
        keyword: '',
        start: new Date(new Date(new Date().toLocaleDateString()).getTime()),
        end: new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000)
      },
      sort: {
        sortType: SortType.DESC
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      pageSizes: [5, 10, 20, 50, 100],
      totalCount: 0
    };
  },
  created() {
    this.search();
  },
  methods: {
    deleteAllLog() {
      MessageBox.confirm('确认删除全部系统活动日志吗？', '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteSystemLogApi()
            .then(res => Message.success(`成功删除${res.count}条系统活动日志`))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.search());
        })
        .catch(() => {});
    },
    deleteSelectedLog() {
      this.selectedSystemActivityLogIdList = this.$refs.dataTableComponent.selectedSystemActivityLogIdList;
      if (this.selectedSystemActivityLogIdList.length == 0) return Message.warning('请选择要删除的活动日志内容');
      MessageBox.confirm(`确认删除${this.selectedSystemActivityLogIdList.length}条系统活动日志吗？`, '删除提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          deleteSystemLogApi(this.selectedSystemActivityLogIdList)
            .then(res => Message.success(`成功删除${res.count}条系统活动日志`))
            .catch(error => Message.error(parseError(error)))
            .finally(() => this.search());
        })
        .catch(() => {});
    },
    search() {
      this.searchForm.btnLoading = true;
      getSystemLogListApi(
        this.currentPage - 1,
        this.pageSize,
        this.sort.sortType,
        this.searchForm.start,
        this.searchForm.end,
        this.searchForm.systemType,
        this.searchForm.level,
        this.searchForm.appender,
        this.searchForm.keyword
      )
        // .then(res => {
        //   this.totalCount = res.total_count;
        //   this.tableData = res.data;
        // })
        .then(({ total_count, data }) => {
          this.totalCount = total_count;
          this.tableData = data.map(systemLog => {
            return {
              id: systemLog.id,
              type: systemLog.type,
              level: systemLog.level,
              appender: systemLog.appender,
              message: systemLog.message,
              detail: systemLog.detail,
              createdAt: systemLog.created_at
            };
          });
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.searchForm.btnLoading = false));
    },
    pageSizeChangeHandler() {
      this.currentPage = 1;
      this.search();
    },
    currentPageChangeHandler() {
      this.search();
    }
  }
};
</script>

<style lang="scss" scoped>
.system-log-list-container {
  .sec-head {
    display: flex;
    justify-content: space-between;
    .local-name {
      padding: 10px 10px 10px 10px;
      font-size: 24px;
      font-weight: 800;
    }
    .delete-btn {
      margin-top: 10px;
      margin-right: 10px;
      .user-activity-delete {
        color: #fff;
        background-color: #f24d1f;
      }
    }
  }
  .system-log-data-table {
    margin: 10px 10px 0 10px;
    padding: 10px;
    background-color: #fff;
  }

  .paging-footer {
    background-color: #fff;
    padding: 10px;
    margin: 0 10px;
  }
  .system-log-search-form {
    background: #fff;
    margin: 0 10px;
  }
}
</style>
